<template>
  <div class="bottom-area">
    <div class="groups">
      <div class="item" v-for="(tool, index) in bottomTools" :key="index">
        <router-link :to="tool.path">
          <div class="icon">
            <i :class="['iconfont', tool.icon]"></i>
          </div>
          <div class="text">
            {{ tool.text }}
          </div>
        </router-link>
        <i class="item.icon "></i>
      </div>
      <div class="item">
        <el-popover popover-style="background-color:transparent; color: #fff;">
          <template #reference>
            <div class="icon">
              <i class="iconfont icon-chizi"></i>
            </div>
          </template>
          <!-- 添加弹窗里面的内容 -->
          <div class="measureIcons" style="display: flex; justify-content: space-around;">
            <div class="measureIcon" v-for="(item, index) in measureIcons" :key="index">
            <router-link :to="`/measure/${item.path}`">
                <i :class="['iconfont', item.icon]"></i>
              </router-link>
            </div>
          </div>
        </el-popover>
        <div class="text" style="font-size: 12px;">
          测量距离
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const bottomTools = [
  {
    icon: 'icon-diqiu',
    text: '自转',
    path: '/rotate'
  },
  {
    icon: 'icon-kongzhitaiSQL',
    text: '控制台',
    path: '/plot'
  },
  {
    icon: 'icon-Airplanedeparture',
    text: '城市视图',
    path: '/cityview'
  },
  {
    icon: 'icon-icon-test',
    text: '查询',
    path: '/search'
  },
  {
    icon: 'icon-qiaoliang',
    text: '桥梁',
    path: '/bridge'
  }

]
const measureIcons = [
  {
    icon: 'icon--_zhexian',
    path: 'line'
  },
  {
    icon: 'icon-checkbox',
    path: 'rect'
  },
  {
    icon: 'icon-duobianxing',
    path: 'polygon'
  },
  {
    icon: 'icon-xingzhuang-tuoyuanxing',
    path: 'circle'
  }

]
</script>

<style scoped lang="scss">
a {
  all: unset;
}

.bottom-area {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 900;
  color: #fff;
  width: 100vw;
  height: 70px;
  background-image: url('/bcg-image/xzd-header.png');
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  transform: rotateZ(180deg);

  .groups {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
    transform: rotateZ(180deg);

    .item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 14px;
      margin-left: 5px;

      a {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 50px;
        font-size: 12px;
      }

      .icon {
        width: 35px;
        height: 35px;
        border-radius: 50%;
        background-color: rgb(0, 0, 147, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 5px;
      }
    }
  }
}
</style>
